<template>
	<view>
		<!-- <view class="solids-bottom padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-sm padding">
					<text class="text-grey">* 可点击记录进行其他操作</text>
				</view>
			</view>
		</view> -->
		
		<view class="grade-list">
			<view class="grade-card" v-for="(item, index) in list" :key="index" @click="clickGrade(item)">
				<tui-card :title="{text: item.name ? item.name : '-', size: 30, color: '#7A7A7A'}" :tag="{text: item.name ? item.name : '-', size: 24}">
					<template v-slot:body>
						<view class="tn-flex tn-flex-col-center tn-flex-row-between">
							<view class="m-lr-20 grade-content text-sm tn-margin-top-sm" style="width: 70%;">
								<view class="grid m-t-20">
									<view class="" style="width: 45%;">总分数：{{item.total_score}}分</view>
									<view>得分数：{{item.score}}分</view>
								</view>
								
								<view class="grid">
									<view style="width: 45%;">答对数：{{item.right_count}}题</view>
									<view>答错数：{{item.error_count}}题</view>
								</view>
								
								<!-- <view class="m-t-20" :class="is_pass ? ['text-green'] : ['text-red']">{{item.is_pass ? '及格' : '未及格'}}</view> -->
							</view>
							<view class="tn-margin-right-lg">
								<text class="tn-icon-right"></text>
							</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="grade-time">
							<view class="grade-time-item" style="width: 69%;">
								时间：{{item.createtime}}
							</view>
							<view class="grade-time-item">
								用时：{{item.timeName}}
							</view>
						</view>
					</template>
				</tui-card>
				
			</view>
			
			<!-- 加载状态条 -->
			<view class="cu-load bg-grey" :class="loadFlag" v-show="has_more || loadFlag == 'over'"></view>
		</view>
		
		<tui-loading v-if="showLoading"></tui-loading>
		<tui-no-data imgUrl="/static/img/img_noorder_3x.png" v-if="showNodata">暂无数据</tui-no-data>
		
		<login ref="login" v-on:succ="getList"></login>
		
		<!-- 操作菜单 -->
<!-- 		<tn-action-sheet
		  v-model="showAction"
		  :tips="tipsAction"
		  :list="listAction"
		  :borderRadius="23"
		  :cancelBtn="true"
		  :maskCloseable="true"
		  @click="clickActionSheetItem"
		  @close="closedActionSheet"
		>
		</tn-action-sheet> -->
	</view>
</template>

<script>
	import TuiCard from '@/components/tui-card/tui-card.vue';
	import { getGradeLog } from '@/api/index.js'
	export default {
		data() {
			return {
				showLoading: false,
				showNodata: true,
				keyword: '',
				list: [],
				loadFlag: 'loading',
				current_page: 1,
				has_more: false,
				gradeItem: null,
				// sheet action
				showAction: false,
				tipsAction: '',
				listAction: [],
				pagesize:10

				
			}
		},
		components: {
			'tui-card': TuiCard
		},
		onLoad(e) {
			this.getList()
		},
		async onReachBottom() {
			console.log("onReachBottom")
			if (this.has_more) {
				this.current_page++
				this.getList()
			}
		},
		methods: {
			// 获取记录
			getList() {
				this.loadFlag = 'loading'
				this.has_more = true
				getGradeLog({page:this.current_page,pagesize:this.pagesize}).then((res)=>{
					if(res.data.code == 1){
						console.log(res.data.data);
									this.list = this.list.concat(res.data.data.data)
									this.current_page = res.data.data.current_page
									this.has_more = this.current_page < res.data.data.last_page
									this.loadFlag = !this.has_more ? 'over' : ''
									this.showNodata = !this.list.length
					}
				}).catch((error)=>{
					this.loadFlag = ''
					this.has_more = false
				})
			},
			// 查看排行榜
			// showRank(paper_id) {
			// 	console.log('paper_id', paper_id)
			// 	this.utils.goto('rank?paper_id=' + paper_id)
			// },
			
			// 点击成绩
			clickGrade(item) {
				this.utils.goto('/pages/wrong/wrong?question_ids=' + item.id)
				// this.gradeItem = item
				// this.tipsAction = {text: item.paper?.title}
				
				// let listAction = [
				// 	{text: '查看排行榜'}
				// ]
				// if (item.error_ids) {
				// 	listAction.unshift({text: '查看错题'})
				// }
				
				// this.listAction = listAction
				// this.showAction = true
			},
			
			// // 点击菜单选项
			// clickActionSheetItem(index) {
			// 	let item = this.listAction[index]
			// 	switch (item.text) {
			// 		// case '查看排行榜':
			// 		// 	this.showRank(this.gradeItem.paper_id)
			// 		// 	break
						
			// 		case '查看错题':
			// 			this.utils.goto('/pages/wrong/index?question_ids=' + this.gradeItem.error_ids)
			// 			break
			// 	}
			// 	this.closedActionSheet()
			// },
			// // 关闭actionSheet
			// closedActionSheet() {
			//   this.show = false
			// }
		}
	}
</script>

<style>
	.grade-list {
		padding-bottom: 20rpx;
	}
	
	.grade-card {
		margin: 20rpx 0;
	}
	
	.options {
		margin: 20rpx 0;
		line-height: 50rpx;
	}
	
	.grade-time {
		margin: 20rpx 0;
		padding: 0rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.grade-content {
		padding-left: 20rpx;
	}
	
	
</style>
